<template>
    <!-- 选择房间弹窗 -->
  <div class="mask">
  	<div class="pop-model select-room">
  		<a href="javascript:void(0)" class="close" @click="closeRoom"></a>
  		<div class="pop-title"></div>
      <div v-if="cRoomData.p_room" :class="{setWidth: cRoomData.p_room.length>3}">
  		<ul class="room-list" id="roomList">
        <template v-if="cRoomData.p_room!==null">
          <li v-for="(item,index) in cRoomData.p_room" class="secret-box" :key="index">
            <a v-if="item.passwd!==''">
              <img v-if="item.pc_avatar" :src="imgRequest+item.pc_avatar" alt="">
              <img v-else src="../../assets/images/moren1.png" alt="">
              <span class="img-mask">
              <div>
                <input type="password" v-model="pwd" @keyup.13="goRoom(item)"/>
                <div>
                  <button class="bth-red" @click="goRoom(item)">确定</button>
                </div>
                
              </div>
              </span>
              <p><span class="ivu-icon ivu-icon-person"></span> 保密</p>
              <!-- <p><span class="ivu-icon ivu-icon-person"></span> {{item.online}}</p> -->
            </a>
          <a v-else @click="goRoom(item)">
            <div class="img-mask"></div>            
            <img v-if="item.pc_avatar" :src="imgRequest+item.pc_avatar" alt="">
            <img v-else src="../../assets/images/moren1.png" alt="">
            <p><span class="ivu-icon ivu-icon-person"></span> {{item.online+myNum}}</p>
          </a>
          </li>
  			</template>
        <template v-else>
          <li class="secret-box" v-for="(item,index) in 4" :key="index">
            <a>
              <img src="../../assets/images/moren1.png" alt="">
            </a>
          </li>
        </template>
  		</ul>
      </div>
  	</div>
  </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import router from "@/router";
import loginStore from "@/store/loginStore";
import { mapGetters, mapActions } from "vuex";
export default {
  props: ["cRoomData"],
  mounted() {
  },
  data() {
    return {
      pwd: "",
      myNum:0,
    };
  },
  created() {
    this.myNum = Math.floor(Math.random()*10)+60
  },
  computed: {
    ...mapGetters(["accountData"])
  },

  methods: {
    closeRoom: function() {
      this.$emit("closeRoom", false)
    },
    goRoom: function(item) {
      console.log(item,'item')
      var lottery_type = item.lottery_type
      var id = item.id
      var pwd = item.passwd
      var maxYb = parseInt(item.max_yb)
      var lowYb = parseInt(item.low_yb)
      var tips = item.lack_tips
      if(!localStorage.getItem("token")) {
      // if (_.isEmpty(localStorage.getItem("userData"))) {
        this.$Modal.warning({
            content: '您还未登录，请先登录',
            scrollable: true,
            onOk: () => {
              var vm = this;
              setTimeout(() => {
                vm.$router.push({path:'/login'});
              }, 1000);
            }
        });
        return false;
      }
      var userMoney = parseInt(this.accountData.money);
      
      if(pwd===''){
        if(maxYb<userMoney || userMoney<lowYb){
          if(_.isEmpty(tips)){
            this.$Message.warning('进入失败，请稍后重试');
          }else{
            this.$Message.warning(tips);
          }      
            return false;
        }
        if(this.cRoomData.isAuthRoom!=0){
          this.$Message.info({
            content:'抱歉，您未开启当前房间权限！',
            onOk: function(){
              this.$router.push('/home')
            }
          })
          return false
        }
        if(item.status==1){
          this.$Message.warning('该房间已关闭');
          return
        }
        // router.push({
        //   name:"Room",
        //   path:'/room/'+id,
        //   params: { lottery_type:lottery_type,id: id}
        // });
        const {href} = this.$router.resolve({
          path:'/room/'+id,
          params: {id: id},
          query: {id: id,lottery_type: lottery_type}
        })
        var tempwindow=window.open()
        tempwindow.location= href
      }else{
        var that = this;
        fetchJson(this,'?m=api&c=lobby&a=privateRoom',{lottery_type:lottery_type,secret_pwd:this.pwd}).then(result=>{
          if(result.status===0){
            if(result.data.passwd===that.pwd){
              var tempwindow=window.open('about:blank')
              //密码正确
              localStorage.setItem('MdStory','私密房间');
              const {href} = this.$router.resolve({
                path:'/room/'+id,
                params: {id:result.data.id},
                query: {id: result.data.id,lottery_type: lottery_type}
              })
              tempwindow.location= href
            }else{
              this.$Message.warning('房间密码错误');              
            }
          }else{
            this.$Message.warning('房间密码错误');
          }
        });
      }
    },
  },
  components: {
  },
  watch: {
    cRoomData: function(newVal){
      if(_.isEmpty(newVal.p_room)){
        return
      }
      setTimeout(function(){
        var roomList = document.getElementById('roomList')
        if(newVal.p_room.length>3){
          roomList.style.width=newVal.p_room.length*204+'px'
        }else{
          roomList.style.width='auto'
        }
      })
    }
  },
  deactivated() {},
  beforeDestroy() {}
};
</script>

<style scoped>
.setWidth{width: 845px;overflow-x: scroll;}
.secret-box img {
  width: 100%;
  height: 100%;
}
/* .secret-box img {
  transition: all 1s ease 0s;
}
.secret-box a:hover img {
  transform: scale(1.15);
} */
.secret-box a img {
	transition: .5s;
}
.secret-box a:hover img {
	transform: scale(1.1);
}
.bth-red {
  cursor: pointer;
}
.room-list{
  min-height: 200px;
}
</style>



// WEBPACK FOOTER //
// src/components/home/chooseRoom.vue